<template>
    <div class="body">
       
        <div class="user-box" v-if="member && !loading">
            
            <div class="user-img">
                <img src="../../assets/images/ccm.jpeg">

            </div>

            <div class="user-personal" style="padding:0;text-align:center;">
                <p class="user-name"><Icon style="color:#c00;padding-right:12px;" type="person"></Icon>{{member.name}}</p>
                <p class="user-gold"><Icon style="color:#c00;padding-right:12px;" type="social-usd"></Icon>储钱罐: {{member.gold}}  金币</p>
                <p class="user-class"><Icon style="color:#c00;padding-right:12px;" type="university"></Icon>帐号: {{member.phone}}</p>
            </div>

            <div class="tips">
                
                <!-- 今日签到可领 <span class="tips-number">2 </span>金币 -->
                更多
            </div>

            <div class="set-personal">
                
                <div class="set-personal-title">
                    设置中心
                </div>

                <div class="set-content-list">
                    <li  :class="[{'set-active': (name == null)}]" @click="seeAuditing(null)"><Icon style="padding-right:12px;" type="person"></Icon>个人资料</li>
                    <li  :class="[{'set-active': (name == 'card')}]" @click="seeAuditing('card')"><Icon style="padding-right:12px;" type="aperture"></Icon>会员信息</li>
                    <!-- <li :class="[{'set-active': (name == 'password')}]" @click="seeAuditing('password')"><Icon style="padding-right:12px;" type="edit"></Icon>修改密码</li> -->
                    <li  :class="[{'set-active': (name == 'auditing') }]" @click="seeAuditing('auditing')"><Icon style="padding-right:12px;" type="ios-checkmark"></Icon>翻译进度</li>
                    <li  :class="[{'set-active': (name == 'gold') }]" @click="seeAuditing('gold')"><Icon style="padding-right:12px;" type="social-usd"></Icon>充值</li>
                </div>

            </div>

        </div>

        <div class="user-content" v-if="name == null && !loading && member">

            <div class="user-content-title">
                <Icon style="padding-right:12px;color:#c00;" type="ios-checkmark"></Icon>会员信息
            </div>
            <br>
            <br>
            <br>
            <br>
           
            <div style="width: 50%;margin: 0px 25%">
                <Form ref="form" :label-width="120">
              
                    <Form-item label="昵称：" prop="name">
                        {{ member.name }}
                    </Form-item>
                    <Form-item label="帐号：">
                        {{ member.phone }}
                    </Form-item>
                    <Form-item label="金币：">
                        {{ member.gold }}
                    </Form-item>
                    <Form-item label="性别：">
                        {{ member.sexText }}
                    </Form-item>
                </Form>
            </div>
            
        </div>  

        <!-- 翻译进度 -->

        <div class="user-content" v-if="name == 'auditing' && !loading">

            <div class="user-content-title">
                <Icon style="padding-right:12px;color:#c00;" type="ios-checkmark"></Icon>翻译进度
            </div>

            <div class="user-steps" v-for="(item, index) in auditing" :key="index"> 

                <!-- <Steps :current="3"  v-if="item.uploads.name"> -->
                <Steps :current="3"  v-if="item.uploads.name" :status="item.status == 'NO' ? 'error' : item.status == 'YES' ? 'finish' : 'wait'">

                    <Step title="上传翻译文件:" :content="item.uploads.name"></Step>
                    <Step title="法规名称:" :content="item.statute.data.name"></Step>
                    <Step title="审核结果:" :content="item.statusText"></Step>

                </Steps>
            </div>
        </div>  

        <!-- 升级会员 -->

        <div class="user-content user-content2" v-else-if="name == 'card' && member && !loading">

            <div class="user-content-title">
                <Icon style="padding-right:12px;color:#c00;" type="aperture"></Icon>会员信息
            </div>
            <Row>
                <Col span="12" v-if="member.statute">
                    
                </Col>
                <Col span="12" v-if="member.Term">
                    
                </Col>
            </Row>

            <div class="user-vip">

                <Row>
                    <Col span="12" v-if="member.statute">
                        <div class="card-box-member">
                            <p class="card-box-member-title">
                                法规会员卡
                            </p>
                            <p class="card-box-membe-time">
                                {{ member.statute.data.start_times }} - {{ member.statute.data.end_times }}
                            </p>
                            <p class="card-box-membe-status">
                                {{ member.statute.data.statusText }}
                                <span v-if="member.statute.data.status== 'YES'" class="card-box-membe-status-detail">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;享 {{ member.statute.data.discount }} 折优惠</span>
                            </p>
                        </div>
                    </Col>
                    <Col span="12" v-if="member.term">
                        <div class="card-box-member">
                            <p class="card-box-member-title">
                                术语会员卡
                            </p>
                            <p class="card-box-membe-time">
                                {{ member.term.data.start_times }} - {{ member.term.data.end_times }}
                            </p>
                            <p class="card-box-membe-status">
                                {{ member.term.data.statusText }}
                                <span v-if="member.term.data.status== 'YES'" class="card-box-membe-status-detail">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;享 {{ member.term.data.discount }} 折优惠</span>
                            </p>
                        </div>
                    </Col>
                    <Col  span="24" >
                        <br>
                        <hr>
                        <br>
                    </Col>
                    <Col span="12" v-if="statuteCard">
                        <div class="card-box-member">
                            <p class="card-box-member-title">
                                购买法规卡
                            </p>
                            <p class="card-box-member-tip">
                                可享受下载、阅读书籍折扣优惠！
                            </p>
                            <br>
                            <Radio-group v-model="card_id" vertical>
                                <Radio :label="item.id + '.' + index + '.statute'" v-for="(item, index) in statuteCard" :key="index" style="font-size:18px;margin: 10px;color: red;border: 1px dashed #000;padding:5px;height:45px;">
                                    {{ item.name }} -- 持续时间 {{ item.days }} 天  -- {{ item.money }} 金币
                                </Radio>
                            </Radio-group>
                        </div>
                        
                    </Col>
                    <Col span="12" v-if="termCard">
                        <div class="card-box-member">
                            <p class="card-box-member-title">
                                购买术语卡
                            </p>
                            <p class="card-box-member-tip">
                                可查看更多术语！
                            </p>
                            <br>
                            <Radio-group v-model="card_id" vertical>
                                <Radio :label="item.id + '.' + index + '.term'" v-for="(item, index) in termCard" :key="index" style="font-size:18px;margin: 10px;color: red;border: 1px dashed #000;padding:5px;height:45px;">
                                    {{ item.name }} -- 持续时间 {{ item.days }} 天  -- {{ item.money }} 金币
                                </Radio>
                            </Radio-group>
                        </div>
                    </Col>
                    <Col  span="24" v-if="card_id != null">
                        <Button type="success" :disabled="card_id == null ? true : false"  long @click="showVipModel()">购买</Button>
                    </Col>
                </Row>

                

            </div>


                
        </div>  

        <!-- 充值 -->

        <div class="user-content" v-if="name == 'gold' && member && !loading">

            <div class="user-content-title">
                <Icon style="padding-right:12px;color:#c00;" type="ios-checkmark"></Icon>充值
            </div>
            <div style="padding: 80px 100px;">  
                <Form ref="formPay" :label-width="120">
              
                    <Form-item label="我的金币余额：" prop="name">
                        {{ member.gold }}
                    </Form-item>
                    <Form-item label="购买：">
                        <Input-number :max="1000000" :min="1" v-model="money"></Input-number> 金币 （1 人民币 = 10 金币）
                    </Form-item>
                    <Form-item label="付款金额：">
                        ￥ {{ money / 10 }}
                    </Form-item>
                    <Form-item label="支付方式：">
                        <img src="../../assets/images/timg.jpg" width="80px">
                    </Form-item>
                    <!-- <Form-item label="到账时间：">
                        1 小时以内
                    </Form-item> -->
                    <Form-item >
                        <Button type="primary" @click="pay"> 购 买 </Button>
                    </Form-item>
                </Form>
            </div>
        </div>  

        <Modal
            v-model="vipModel"
            title="支付"
            ok-text="确认支付"
            v-if="member"
            @on-ok="doPayGold"
           >
            <p style="padding: 10px;font-size:20px;">支付金币：{{ this.card_gold }} G</p>
            <p style="padding: 10px;font-size:20px;" v-if="member">金币余额：{{ this.member.gold }} G</p> 
        </Modal>


    </div>
</template>
<script>
    export default {
        data () {
            return {
               
               member: null,

               auditing:[],
               uploads_url:null,
               uploads_name:null,
               statute_id:null,

               statuteCard: [],

               termCard: [],

               card_id: null,

               card_gold: null,

               money: 20,

               name: this.$route.query.name,
              
               vipModel:false,

               loading: false,
            }
        },
        created() {
            this.getAuther();
            if ( this.name == 'card'  && this.termCard.length == 0 && this.statuteCard.length == 0  ) {
                this.fetchCard();
            }
        },
        watch: {
            $route() {
                this.loading = true;
                this.name = this.$route.query.name;
                this.changeName();
                if ( this.name == 'card'  && this.termCard.length == 0 && this.statuteCard.length == 0  ) {
                    this.fetchCard();
                }
            },
            loading() {
                if ( this.loading ) {
                    this.$store.commit('mainLoading', true);
                }else {
                    this.$store.commit('mainLoading', false);
                }
            }
        },
        methods:{

            getAuther() {

                this.$store.commit('mainLoading', true);
                
                this.$http.get('/member/me?include=statute,term' ).then(rets => {

                    this.member = rets.data.data;

                }).then(() => {
                    this.$http.get('/auditing/list',{params: {member_id:this.member.id, include: 'statute,member'}}).then(ret => {

                        this.auditing = ret.data.data;

                        this.$store.commit('mainLoading', false);

                    }).catch(err => {

                        this.$Message.error( '获取上传翻译失败..');

                    })
                }).catch(err => {

                    this.$Message.error( '请登录..');
                
                })

               

            },

            // 查看翻译进度

            seeAuditing(names){
                let query = {
                    name: names
                }
                this.$router.push({path: this.$route.path, query});
            },

            routeLink(link) {
                  this.$router.push({path: link});
            },
            // 显示支付页面
            showVipModel(){
                var card = this.card_id.split(".");
                
                if ( card[2] == 'term' ) {

                    this.card_gold = this.termCard[ card[1] ].money;
                }else {
                    this.card_gold = this.statuteCard[ card[1] ].money;
                }
                this.vipModel = true;
            },

            // 确认支付
            doPayGold() {


                var card = this.card_id.split(".");

                if ( this.member.gold < ( card[2] == 'term' ? this.termCard[ card[1] ].money : this.statuteCard[ card[1] ].money ) ) {
                    this.$Message.error('金币余额不足，请及时充值！');
                    return false;
                }

                this.$Loading.start();

                // 处理数组
                var map = {
                    type:  card[2] == 'term' ? "TERM" : "STATUTE",
                    card_id:  card[0]
                };

                this.$http.post('rent/add',  map).then(ret => {
                    this.$Message.success('支付成功');
                    this.$Loading.finish();
                    this.getAuther();
                }).catch(err => {
                      if ( err.response.data ) {
                          this.$Message.error(err.response.data.message);
                      }else {
                          this.$Message.error('未知错误');
                      }
                      this.$Loading.error(); 

                })
            },

            // 转换显示内容
            changeName() {
                var ob = this;
                setTimeout(function(){ 
                    ob.loading = false;
                }, 1500, ob);
            },

            // 查找会员卡
            fetchCard() {
                this.$store.commit('mainLoading', true);
                
                this.$http.get('/card/list', {params: {type: 'STATUTE', status: '1'}} ).then(rets => {

                    this.statuteCard = rets.data.data;

                }).then(() => {

                    this.$http.get('/card/list',{params: {type: 'TERM', status: '1'}}).then(ret => {

                        this.termCard = ret.data.data;

                        this.$store.commit('mainLoading', false);

                    }).catch(err => {

                        this.$Message.error( '获取上传翻译失败..');

                    })
                }).catch(err => {

                    this.$Message.error( '请登录..');
                
                })
            },

            // 支付
            pay() {
                this.$Loading.start();

                
                this.$http.post('/pay/pay', {type: 'RECH', money: (this.money / 10)} ).then(rets => {

                    // 跳转
                    location.href = rets.data.url;

                }).catch(err => {
                    this.$Loading.error();
                    this.$Message.error( '支付失败..');

                
                })
            }
    }
}
</script>

<style scoped lang="less">
    .ivu-form-item-label {
        font-size: 20px;
    }
    .card-box-member {
        border: 1px dashed #ccc;
        margin: 5px 10px;
        padding: 10px;
        .card-box-member-title {
            font-size: 20px;
            color: #CD0000;
            font-weight: 600;
        }
        .card-box-membe-time {
            margin: 10px;
            color: #000;
        }
        .card-box-membe-status {
            margin: 10px;
            color: #000;
            font-size: 20px;

            .card-box-membe-status-detail {
                color: #CD0000;
                font-size: 16px;
            }
        }
        .card-box-member-tip {
            font-size: 14px;
            color: #000;
            margin: 10px 20px;
        }
    }

    .user-content{
        width: 920px;
        float: left;
        padding-left: 42px;
        padding-top: 50px;
        height: 600px;
        overflow-y: auto;
        background: #fff;
        background-size: 100%;
    }

    .user-content2{
        width: 920px;
        float: left;
        padding-left: 42px;
        padding-top: 50px;
        height: 600px;
        overflow-y: auto;
    }
    .user-content-title{
        height: 50px;
        text-align: center;
        font-size: 28px;
    }
    .user-box{
        float: left;
        width: 280px;
        border-right:1px solid #eee;
        height: 580px;
        padding-top: 40px;
        background: #fff;
    }
    .user-img{
        width: 80px;
        height: 80px;
        overflow:hidden;
        margin-left: 10px;
        float: left;
        margin-right: 10px;
    }
    .user-personal{
        float: left;
        width: 178px;

    }
    .user-name{
        font-size: 20px;
        font-weight: 700;
    }
    .user-personal p{
        width: 100%;
        text-align: left;
    }

    .user-gold{
        margin-top: 16px;
    }
    .user-class{
        margin-top: 8px;
    }
    .editPersonalBox{
        width: 80%;
        margin:0 auto;
        height: 420px;
    }

    .ivu-steps-item{
        width: 33%!important ;
    }
    .user-steps{
        padding: 32px 0 32px 64px;
        border-bottom: 1px solid #eee;
    }
    .tips{
        width: 100%;
        height: 36px;
        float: left;
        line-height: 36px;
        background: #c00;
        color: #fff;
        text-align: center;
        margin-top: 42px;
        cursor: pointer;
    }
    .tips-number{
        font-size: 20px;
        font-weight: 800;
    }

    .set-personal{
        width: 80%;
        margin: 30px auto 0;
        float: left;
        height: 280px;
        margin-left: 10%;
        border:1px solid #ccc;
        border-radius: 4px;
    }
    .set-personal-title{
        height: 36px;
        line-height: 36px;
        background: #eee;
        padding-left: 5%;
        border-left: 4px solid #c00;
    }
    .set-content-list{
        height: 42px;
        line-height: 42px;
        text-align: center;
        margin-top: 10px;
        cursor: pointer;
    }

    .set-content-list .set-active{
        background: #eee;
    }
    .user-vip-myselft{
        height: 80px;
        line-height: 80px;
        font-size: 28px;
        font-weight: 800;
        text-align: center;
        color: #333;
    }
    .user-vip-title{
        text-align: center;
    }
    .user-vip-content{
        height: 120px;
        width: 780px;
        margin: 42px auto 0;
    }

    .user-vip-content li{
        width: 80px;
        height: 80px;
        border-radius: 100%;
        float: left;
        margin:0 35px;
        text-align: center;
        border:4px solid #333;
        line-height: 80px;
    }
    .user-vip-text{
        width: 120px;
        color: #c00;
        font-size: 14px;
        font-weight: 800;
        text-align: left;
    }
    .user-vip-button{
        width: 240px;
        background: #c00;
        height: 60px;
        line-height: 60px;
        border-radius: 4px;
        color: #fff;
        text-align: center;
        font-weight: 800;
        font-size: 28px;
        margin:100px auto 0;
        cursor: pointer;
    }

    /*.user-vip-content li:nth-child(1){
        border: 4px solid #2d8cf0;
    }
    .user-vip-content li:nth-child(2){
        border: 4px solid #19be6b;
    }
    .user-vip-content li:nth-child(3){
        border: 4px solid #FF9900;
    }
    .user-vip-content li:nth-child(4){
        border: 4px solid #ed3f14;
    }
    .user-vip-content li:nth-child(5){
        border: 4px solid #333;
    }
    */


</style>
